import Top from "../home/component/top";
import MyFooter from "../home/component/myFooter";
import {Button, Form, Input, Layout, Pagination, Select,Checkbox,Radio} from "antd";
import Media from "./component/Media";
import ProductPreview from "./component/ProductPreview";
import React, {useEffect, useState} from "react";
import axios from "axios";
import {LoadingOutlined} from "@ant-design/icons";
import {useLocation} from "react-router-dom";
const {  Content } = Layout;


const Season = () => {

    let location = useLocation();
    // 访问查询字符串参数
    let searchParams = new URLSearchParams(location.search);
    let paramValue = searchParams.get('name');

    const [product ,setProduct] = useState([]) ;
    const [total, setTotal] = useState();
    const [params ,setParams] = useState({
        page: 1,
        pageSize: 10,
        name: '',
        season: ''
    })

    const handlePageSizeChange = (page, pageSize) => {
        setParams({ ...params, page, pageSize });
    };

    const getList =  async () => {
        try {
            const response = await axios.get('http://localhost:8084/stock/season', {
                params: params
            });
            setTotal(response.data.data.total)
            setProduct(response.data.data.records);
        } catch (error) {
            console.error(error);
        }
    }
    useEffect(() => {
        getList();
    },[params]);
    useEffect(() => {
        if (paramValue !== null && paramValue !== '') {
            setParams({ ...params, name:paramValue });
        }
    },[]);

    const [fruitName, setFruitName] = useState('');
    const [season, setSeason] = useState('');

    const handleInputChange = (e) => {
        setFruitName(e.target.value);
        setParams({ ...params, name:e.target.value });
    };

    const handleSeasonChange = (value) => {
        setSeason(value.target.value);
        setParams({ ...params, season:value.target.value});
    };



    const formStyle = {
        maxWidth: '500px',
        margin: '0 auto',
        padding: '20px',
    };

    const titleStyle = {
        textAlign: 'center',
        marginBottom: '10px',
        fontSize: '26px',
        color: 'rgb(0, 153, 68)',
        fontFamily: 'Microsoft YaHei',
    };

    return(
    <>
        <Layout className="layout">
        <Top></Top>
            <Content style={{ padding: '0 100px'}}>

                <Media/>
                <div >
                    <Form style={formStyle}>
                        <h2 style={titleStyle}>果蔬搜索</h2>
                        <Form.Item label="果蔬名称"  name="searchTitle" rules={[{ required: false, message: '请输入名称' }]}>
                            <Input  value={fruitName}  onChange={handleInputChange}/>
                        </Form.Item>

                        <Form.Item label="选定季节" name="season" rules={[{ required: false, message: '请选择季节' }]}>
                            <Radio.Group  value={season} onChange={handleSeasonChange}>
                                <Radio.Button defaultChecked="true" value="">全年</Radio.Button>
                                <Radio.Button value="春季">春季</Radio.Button>
                                <Radio.Button value="夏季">夏季</Radio.Button>
                                <Radio.Button value="秋季">秋季</Radio.Button>
                                <Radio.Button value="冬季">冬季</Radio.Button>
                            </Radio.Group>

                        </Form.Item>
                    </Form>
                </div>

                {product.length > 0 ? (
                        <div style={{width:'1200px'}}>
                        {product.map((product, index) => (
                                <ProductPreview product={product} />
                        ))}
                        </div>
                ) : (
                    <LoadingOutlined />
                )}

            </Content>

            <div style={{
                textAlign: 'center',
            }}>     <Pagination
                total={total}
                showTotal={(total) => `一共 ${total} 条数据`}
                pageSize={params.pageSize}
                current={params.page}
                onChange={handlePageSizeChange}
            /></div>

        <MyFooter></MyFooter>
        </Layout>
    </>
)
}
export default Season;